<template>
  <div class="page">
    <div id="avg_count_charts" class="charts-item" :style="{ width: '100%', height: '340px' }"></div>
    <div id="avg_duration_charts" class="charts-item" :style="{ width: '100%', height: '340px', 'margin-top': '50px' }"></div>
    <div class="table-box">
      <el-table :data="tableData" style="width: 100%" max-height="500">
        <el-table-column prop="dataDate" label="日期" width="120"/>
        <el-table-column prop="moduleName" label="模块"/>
        <el-table-column prop="userCount" label="使用人数"/>
        <el-table-column prop="pvCount" label="使用总次数"/>
        <el-table-column prop="duration" label="使用总时长(分钟)"/>
        <el-table-column prop="avgPv" label="人均次数"/>
        <el-table-column prop="avgDuration" label="人均时长(分钟)"/>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import {onMounted, onBeforeUnmount, ref} from "vue";
import api from '../../api/index.js'
import * as echarts from "echarts";

const tableData = ref([])
const chartsObj = {}
const initLineCharts = (id, title, xData, seriesData, tooltip) => {
  if (!chartsObj[id]) {
    chartsObj[id] = echarts.init(document.getElementById(id));
  }
  chartsObj[id].setOption({
    title: {
      text: title,
      left: '10%',
    },
    tooltip: tooltip || {
      trigger: 'axis'
    },
    legend: {
      data: seriesData.map((item) => item.name)
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xData,
      axisLabel : { // 坐标轴刻度标签的相关设置。
        interval: 0,
        rotate: '45'
      },
    },
    yAxis: {
      type: 'value'
    },
    series: seriesData,
  });
}
onMounted(() => {
  window.onresize = function () {
    Object.keys(chartsObj).forEach((k) => {
      chartsObj[k] && chartsObj[k].resize();
    })
  }
})
onBeforeUnmount(() => {
  Object.keys(chartsObj).forEach((k) => {
    chartsObj[k] && chartsObj[k].dispose();
  })
})
const getModuleAvgUseCountData = async () => {
  try {
    const res = await api.getModuleAvgUseCountData()

    if (res.data && res.data.length) {
      const moduleArr = Object.keys(res.data[0])
      const xData = []
      const seriesData = []
      moduleArr.forEach((k) => {
        if (k !== 'date') {
          seriesData.push({
            name: k,
            type: 'line',
            data: []
          })
        }
      })
      res.data.forEach((data) => {
        xData.push(data.date)
        seriesData.forEach((ser) => {
          ser.data.push(data[ser.name])
        })
      })
      initLineCharts('avg_count_charts', '人均使用次数', xData, seriesData)
    }
  } catch(e){}
}
getModuleAvgUseCountData()
const getModuleAvgUseDurationData = async () => {
  try {
    const res = await api.getModuleAvgUseDurationData()
    if (res.data && res.data.moduleData && res.data.moduleData.length) {
      delete res.data.total.total
      const moduleArr = Object.keys(res.data.total)
      const xData = []
      const seriesData = Array.from(moduleArr, (k) => {
        return {
          name: k,
          type: 'line',
          data: []
        }
      })

      res.data.moduleData.forEach((data) => {
        xData.push(data.date)
        moduleArr.forEach((k, index) => {
          seriesData[index].data.push(data[k])
        })
      })
      initLineCharts('avg_duration_charts', '人均使用时长', xData, seriesData)
    }
  } catch(e){}
}
getModuleAvgUseDurationData()
const getModuleUseData = async () => {
  try {
    const res = await api.getModuleUseData()
    if (res.data && res.data.length) {
      tableData.value = res.data
    }
  } catch(e){}
}
getModuleUseData()

</script>

<style scoped lang="scss">
.page{
  position: relative;
  height: 100%;
}
.table-box{
  position: relative;
  padding-bottom: 20px;
}
</style>
